﻿<script setup lang="ts" name="Import">
import { storeToRefs } from 'pinia'
import type { ExcelData } from '@/components/Excel/src/type'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)

const tableListRef = ref<
  {
    title: string;
    columns?: any[];
    dataSource?: any[];
    currentPageDataSource?: any[];
    pageIndex: number;
    pageSize: number;
    count: number;
  }[]
>([])

const loadDataSuccess = (excelDataList: ExcelData[]) => {
  tableListRef.value = []
  for (const excelData of excelDataList) {
    const {
      header,
      results,
      meta: { sheetName }
    } = excelData
    const columns = []
    for (const title of header) {
      columns.push({ title, dataIndex: title })
    }
    const currentPageDataSource = results.slice(10 * 0, 10 * 0 + 10)
    tableListRef.value.push({ title: sheetName, dataSource: results, currentPageDataSource, columns, pageIndex: 1, pageSize: 10, count: results.length })
  }
}

const handleSizeChange = (idx, val) => {
  tableListRef.value.forEach((item, index) => {
    if (idx === index) {
      item.pageSize = val
      item.pageIndex = 1
      item.currentPageDataSource = item.dataSource.slice(item.pageSize * (item.pageIndex - 1), item.pageSize * (item.pageIndex - 1) + item.pageSize)
    }
  })
}
const handleCurrentChange = (idx, val) => {
  tableListRef.value.forEach((item, index) => {
    if (idx === index) {
      item.pageIndex = val
      item.currentPageDataSource = item.dataSource.slice(item.pageSize * (item.pageIndex - 1), item.pageSize * (item.pageIndex - 1) + item.pageSize)
    }
  })
}
</script>

<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-card shadow="never" class="no-border no-radius">
        <template #header>
          <div class="card-header">
            <span>Excel导入功能</span>
            <ExcelImport dateFormat="YYYY-MM-DD" @success="loadDataSuccess"><el-button type="primary">导入Excel</el-button> </ExcelImport>
          </div>
        </template>
        <div v-for="(item, index) in tableListRef" :key="index" class="table-list">
          <h2>{{ item.title }}</h2>
          <el-table ref="xTable" :data="item.currentPageDataSource" border stripe style="width: 100%">
            <el-table-column type="index" width="50" />
            <el-table-column v-for="(td, idx) in item.columns" :key="idx" :prop="td.dataIndex" :label="td.title" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="date" label="发布日期" />
            <el-table-column prop="like" label="评论" />
            <el-table-column prop="author" label="作者" />
          </el-table>
          <el-pagination
            v-if="item.dataSource.length > 0"
            v-model:currentPage="item.pageIndex"
            v-model:page-size="item.pageSize"
            :page-sizes="[10, 20, 40, 80]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="item.count"
            @size-change="(val) => handleSizeChange(index, val)"
            @current-change="(val) => handleCurrentChange(index, val)" />
        </div>
      </el-card>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

h2 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.el-card {
  display: flex;
  flex-direction: column;

  :deep(.el-card__header) {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

    }
  }

  :deep(.el-card__body) {
    flex: 1;
  }

  .table-list {
    width: 100%;
    margin-top: 20px;
  }

  .table-list+.table-list {
    h2 {
      margin-top: 20px;
    }
  }
}

.el-pagination {
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
